<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>商家详情</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/commodity-details.css" />
		<link rel="stylesheet" href="css/supermarket.css" />
		<link rel="stylesheet" href="css/all.css" />
	</head>
	<style>
		.business {
			width: 100%;
			padding-top: 3rem;
			position: absolute;
			top: 1.5rem;
			bottom: 0rem;
			z-index: -1;
			overflow-y: scroll;
		}
	</style>

	<body>
		<div class="">
			<div class="head">
				<span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
				<h1 class="titles">商家详情</h1>
			</div>
			<div class="middle-one ">
				<div class="merchant">
					<div class="store row">
						<div class="merchants">
							<img src="img/chengshi.png" alt="">
						</div>
						<i class="stores">沈阳城市猎人户外军品之家</i>
					</div>
					<!--<div>
                <ul  class="amount row">
                    <li class="amounts">
                        <span>54</span>
                        <p>任务数量</p>
                    </li>
                    <li class="amounts">
                        <span>2.8万</span>
                        <p>员工数量</p>
                    </li>
                    <li class="amounts">
                        <span>100万</span>
                        <p>总资产</p>
                    </li>
                </ul>
            </div>-->
				</div>
				<div class="product">
					<p>发布的任务</p>
				</div>
				<div class="business">

					<!--<div>
						<a href="commodity-details.html">
							<div class="commodity">
								<div class="commoditys">
									<img src="img/300377.png" alt="">
								</div>
								<div class="commo">
									<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
									<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
									<span>(</span><i class="money">1元</i><span>/100次)</span>
								</div>
							</div>
						</a>
					</div>-->
					<!--<div onclick="location.href='./commodity-details.html'">
						<div class="commodity">
							<div class="commoditys">
								<img src="img/300377.png" alt="">
							</div>
							<div class="commo">
								<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
								<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
								<span>(</span><i class="money">1元</i><span>/100次)</span>
							</div>
						</div>
					</div>
					<div onclick="location.href='./commodity-details.html'">
						<div class="commodity">
							<div class="commoditys">
								<img src="img/300377.png" alt="">
							</div>
							<div class="commo">
								<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
								<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
								<span>(</span><i class="money">1元</i><span>/100次)</span>
							</div>
						</div>
					</div>
					<div onclick="location.href='./commodity-details.html'">
						<div class="commodity">
							<div class="commoditys">
								<img src="img/300377.png" alt="">
							</div>
							<div class="commo">
								<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
								<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
								<span>(</span><i class="money">1元</i><span>/100次)</span>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			//获取商家信息
			(function() {
				var data = {
					userName: GetQueryString("userName")
				};
				//		
				var success = (data) => {

					$(".stores").text(data.message.userAuthentication.fullName);

					$(".merchants img").attr("src", data.message.users.portrait)

				}

				Hajax("post", "/user/getUserAll", data, success);
			})();


			var html = "";
			//获取商家发布的商品
			function ajaxLoad(page) {
				var data = {
					"userName": GetQueryString("userName"),
					"page": page,
					"rows": 3
				};

				var success = (data) => {
					_loadState = 0; //状态改为0
					
					
					
					for(let i=0;i<data.message.length;i++){
						html+=`
							<div>
								<a href="commodity-details.html?browseTaskId=${data.message[i].browseTask.browseTaskId}">
									<div class="commodity">
										<div class="commoditys">
											<img src="${data.message[i].browseTask.picture}" alt="">
										</div>
										<div class="commo">
											<p class="commo-one">${data.message[i].browseTask.title}</p>
											<p class="commo-two">${data.message[i].browseTask.briefIntroduction} </p>
											<span>(</span><i class="money">${data.message[i].browseTask.oneMoney}元</i><span>/${data.message[i].browseTask.surplusNum}次)</span>
										</div>
									</div>
								</a>
							</div>
						`
					}
				 
					$(".business").html(html);
					
					
				};

				Hajax("post", "/user/getUserBrowseTask", data, success);

			}

			//			
			console.log(GetQueryString(decodeURI("picture")));
			var Request = new UrlSearch(); //实例化
			$(".titles").text(decodeURI(Request.picture));

			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.business', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>